<template>
  <el-menu
    :default-active="activeMenuFinal"
    mode="horizontal"
    @select="handleSelect"
  >
    <template v-for="(item, index) in topMenus">
      <el-menu-item :index="item.path" :key="index" v-if="index < visibleNumber" :disabled="item.disable"
      >
        <!--        <svg-icon :icon-class="item.meta.icon"/>-->
        <span>{{item.meta.title }}</span>

      </el-menu-item
      >
    </template>

    <!-- 顶部菜单超出数量折叠 -->
    <el-submenu index="more" v-if="topMenus.length > visibleNumber">
      <template slot="title">更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <el-menu-item
          :index="item.path"
          :key="index"
          v-if="index >= visibleNumber"
        >

          {{ item.meta.title }}
        </el-menu-item
        >
      </template>
    </el-submenu>
  </el-menu>
</template>

<script>
  import { constantRoutes } from '@/router'

  import { getCommonData } from '@/api/tx_answer/common'

  var _this

  export default {
    data() {
      return {
        authId: '',
        rid: '',
        // 顶部栏初始数
        visibleNumber: 5,
        // 是否为首次加载
        isFrist: false,
        // 当前激活菜单的 index
        currentIndex: undefined,
        loading: false,
        this_month: '',


        txb_url: '',//跳转同事宝链接
        txb_answer: '',
        rid_data: {//用户权限数据
          uid: '',
          is_admin: '00',//是否超管、超管助理
          projPmflg: '00',//项目经理
          projQaflg: '00',//审核人
          rembFinflg: '00',//报销财务 01
          rembQaflg: '00',//报销审核人 01普通02管理
          rembHrflg: '00',// 01报销职能经理
          is_finance: '00',//是否具备财务权限
          simAdmflg: '00',//物料管理员
          simmglev: '00',//物料管理总管理员
          projCmflg: '00'//总负责人
        },
        activeMenuFinal: ''
      }
    },
    computed: {
      // 顶部显示菜单
      topMenus() {
        let topMenus = []
        console.log(_this.routers)
        this.routers.map((menu) => {
          if (menu.hidden !== true) {
            // 兼容顶部栏一级菜单内部跳转
            if (menu.path === '/') {
              topMenus.push(menu.children[0])
            } else {
              topMenus.push(menu)
            }
          }
        })
        return topMenus
      },
      // 所有的路由信息
      routers() {
        return this.$store.state.permission.topbarRouters
      },
      // 设置子路由
      childrenMenus() {
        var childrenMenus = []
        this.routers.map((router) => {
          for (var item in router.children) {
            if (router.children[item].parentPath === undefined) {
              if (router.path === '/') {
                router.children[item].path = '/redirect/' + router.children[item].path
              } else {
                if (!this.ishttp(router.children[item].path)) {
                  router.children[item].path = router.path + '/' + router.children[item].path
                }
              }
              router.children[item].parentPath = router.path
            }
            childrenMenus.push(router.children[item])
          }
        })
        return constantRoutes.concat(childrenMenus)
      },
      // 默认激活的菜单
      activeMenu: {
        get: function() {
          // 设置顶部默认路由
          const path = this.$route.path
          let activePath = '/access'

          if (path.lastIndexOf('/') > 0) {
            const tmpPath = path.substring(1, path.length)
            activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'))
          }
          var routes = this.activeRoutes(activePath)
          if (routes.length === 0) {
            activePath = this.currentIndex || this.defaultRouter()
            this.activeRoutes(activePath)
          }
          this.activeMenuFinal = activePath
          console.log(_this.activeMenuFinal)
          return activePath
        },
        set: function(value) {
          this.activeMenuFinal = value
        }

      }
    },
    beforeMount() {
      window.addEventListener('resize', this.setVisibleNumber)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.setVisibleNumber)
    },
    created: function() { //html加载完成之前
      _this = this
      _this.activeMenu
    },
    mounted() {
      _this.authId = _this.$cache.session.get('authId')
      _this.rid = _this.$cache.session.get('admin_cur_rid')
      this.setVisibleNumber()
      _this.show_url()
      console.log(sessionStorage.getItem('answer_current_url'))
      if (sessionStorage.getItem('answer_current_url')) {
        this.activeMenuFinal = sessionStorage.getItem('answer_current_url')
      }
      console.log(_this.activeMenuFinal)

    },

    methods: {
      show_url: function() {
        var url=sessionStorage.getItem("answer_current_url");
        if(url!=''&&url!=undefined){
          _this.current_url=url;
          _this.current_index = sessionStorage.getItem("answer_current_index");
        }else{
          _this.current_url='/access';
          _this.current_index = 0;
        }
        _this.defaultJumpMenu(_this.current_url, '')
      },

      // 根据宽度计算设置显示栏数
      setVisibleNumber() {
        const width = document.body.getBoundingClientRect().width / 3
        this.visibleNumber = parseInt(width / 85)
      },
      // 默认激活的路由
      defaultRouter() {
        let router
        Object.keys(this.routers).some((key) => {
          // console.log(this.routers[key])
          if (!this.routers[key].hidden) {
            router = this.routers[key].path
            return true
          }
        })
        return router
      },
      // 菜单选择事件
      handleSelect(key, keyPath) {
        this.currentIndex = key
        sessionStorage.setItem('answer_current_url', key)

        if (this.ishttp(key)) {
          // http(s):// 路径新窗口打开
          window.open(key, '_blank')
        } else if (key.indexOf('/redirect') !== -1) {
          // /redirect 路径内部打开
          this.$router.push({ path: key.replace('/redirect', '') })
        }else {
          if(key==='/access'){
            _this.activeMenuFinal = '/access'
            this.$router.push({
              path:'/access/list'
            })
          }else {
            _this.activeMenu = '/access'
            _this.activeMenuFinal = '/access'
            console.log(_this.activeMenu)
            alert("敬请期待");
          }

        }
      },
      // 当前激活的路由
      activeRoutes(key) {
        var _this = this
        var routes = []
        if (this.childrenMenus && this.childrenMenus.length > 0) {
          this.childrenMenus.map((item) => {
            if (key == item.parentPath || (key == 'index' && '' == item.path)) {
              routes.push(item)
            }
          })
        }
        if (routes.length > 0) {
          this.$store.commit('SET_ROUTES', routes)
        }
        return routes

      },
      //默认跳转菜单
      defaultJumpMenu(top_url, left_url) {
        _this.activeMenu = top_url
        _this.activeRoutes(top_url)
      },
      ishttp(url) {
        return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
      },

    }
  }
</script>

<style lang="scss">
  .topmenu-container .el-menu {
    border: none;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: transparent;
  }

  .topmenu-container .el-menu--horizontal > .el-menu-item {
    float: left;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    opacity: 0.5;
    padding: 0px;
    margin-right: 36px
    /*margin: 0 10px;*/
  }

  .topmenu-container .el-menu--horizontal > .el-menu-item > span {
    display: inline-block;
    vertical-align: middle;
    position: relative;
  }

  .topmenu-container .el-menu--horizontal > .el-menu-item > span::after {
    position: absolute;
    left: 50%;
    margin-left: -13px;
    bottom: 5px;
    width: 26px;
    height: 2px;
    background-color: #fff;
    content: '';
    display: none;
  }

  .topmenu-container .el-menu--horizontal .is-active span::after {
    display: block;
  }

  /* submenu item */
  .topmenu-container .el-menu--horizontal > .el-submenu .el-submenu__title {
    float: left;
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    padding: 0 5px;
    margin: 0 10px;
  }

  .el-menu--horizontal > .el-menu-item:hover {
    background: transparent !important;
    color: white !important;
  }


  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
    background: transparent;
    color: white;
  }

  .el-menu-item.is-active {
    opacity: 1!important;
    border-bottom: 2px solid #2A2D33!important;
    /*color: #B8C9A5;*/
  }

  .red_icon {
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
    line-height: 16px;
    font-weight: normal;
    height: 16px;
    background-color: #F95355;
    color: #fff;
    font-style: normal;
    border-radius: 8px;
    margin-left: 3px;
  }

  .red_icon b {
    font-weight: normal;
    display: block;
    font-size: 12px;
    transform: scale(0.9);
  }

  .el-menu-item i {
    color: #fff;
  }
</style>
